<template>
  <a-tabs size="small" class="mpd-panel-dynamic-config height-full" :tabBarGutter="0">
    <a-tab-pane v-for="(item1, index1) in actionItem.extra" :key="index1" :tab="item1.name" class="height-full">
      <scroll-container>
        <div class="margin-b-xs" v-for="(item2, index2) in item1.children" :key="index2">
          <component-config :item="item2" :actionItem="actionItem"></component-config>
        </div>
      </scroll-container>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import ComponentConfig from './components/ComponentConfig'

export default {
  name: 'PanelDynamicConfig',
  components: { ComponentConfig },
  props: {
    actionItem: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="less">
.mpd-panel-dynamic-config {
  .ant-tabs-bar {
    margin: 0;
  }
  .ant-tabs-content {
    height: calc(100% - 40px);
  }
}
</style>
